<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>更新用户信息</title>
    <header th:replace="header::html"></header>
</head>

<body>
<div class="x-body">
    <form class="layui-form">

        <input type="hidden" id="userId" name="id" th:value="${tbUser.id}">
        <div class="layui-form-item">
            <label for="L_userName" class="layui-form-label">
                <span class="x-red">*</span>用户名
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_userName" th:value="${tbUser.userName}" name="userName" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                <span class="x-red">*</span>将会成为您唯一的登入名
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_nickName" class="layui-form-label">
                <span class="x-red">*</span>昵称
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_nickName" th:value="${tbUser.nickName}" name="nickName" required="" lay-verify="nickname" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="L_phone" class="layui-form-label">
                <span class="x-red">*</span>手机
            </label>
            <div class="layui-input-inline">
                <input type="text" id="L_phone" th:value="${tbUser.phone}" name="phone" required="" lay-verify="telephone" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                11位数字
            </div>
        </div>

        <input type="text" id="roleId"  name="roleId" style="display:none;"/>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block show-role-container">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <button  class="layui-btn" lay-filter="edit" lay-submit="">
                保存
            </button>
        </div>
    </form>
</div>
<script>

    layui.use(['form','layer', 'laydate'], function(){
        $ = layui.jquery;
        var form = layui.form
            ,layer = layui.layer
            ,laydate = layui.laydate;
        getAllRole(function(){
            layui.form.render('radio')
        });
        //日期
        laydate.render({
            elem: '#L_birthday'
            ,format: 'yyyy-MM-dd' //可任意组合
        });

        //自定义验证规则
        form.verify({
            nikename: function(value){
                if(value.length < 5){
                    return '昵称至少得5个字符啊';
                }
            }
            ,telephone: [/(.+){11,11}$/, '电话号码必须11位']
        });

        //监听提交
        form.on('submit(edit)', function(data){
            var rolelRadio = $("[name=roleId]:checked");
            if(rolelRadio == undefined || rolelRadio.length <= 0){
                layer.alert("请给该用户设置角色");
                return false;
            }
            data.field.roleId = rolelRadio.val();
            $.ajax({
                url:"/system/user/edit",
                type:"POST",
                data:data.field,
                dataType:'json',
                success:function(result){
                    if(result.code == 20001 || result.code == 5000100 || result.code == 5000101 || result.code == 5000102){
                        layer.alert(result.msg);
                    }else{
                        layer.alert("修改成功", {icon: 6},function () {
                            //关闭当前frame
                            xadmin.close();
                            // 可以对父窗口进行刷新
                            xadmin.father_reload();
                        });
                    }
                }
            });
            return false;
        });


    });
    function getAllRole(callback){
        $.ajax({
            url:"/system/role/all",
            type:"GET",
            dataType:'json',
            success:function(result){
                var html = "";
                if(result.data && result.data.length > 0){
                    for(i in result.data ){
                        html += '<input type="radio"  name="roleId" value="'+result.data[i].id+'" title="'+result.data[i].name+'" >' +
                            '<div class="layui-unselect layui-form-radio layui-form-radioed"><i class="layui-anim layui-icon"></i><div>'+result.data[i].name+'</div></div>';
                    }
                    $(".show-role-container").html(html);

                    getCurrentUserRole(callback);
                }
            }
        });
    }

    function getCurrentUserRole(callback){
        var userId = $("#userId").val();
        $.ajax({
            url:"/system/roleuser/index",
            type:"POST",
            data:{
                "userId" : userId
            },
            dataType:'json',
            success:function(result){
                if(result.code == 200){
                    if(result.data){
                        var str1 = JSON.stringify(result.data);
                        if (str1 == "[]"){
                            str1 = "[{'roleId': null}]"
                        }

                        var str = str1.substring(1,str1.length-1)
                        console.log(str1)
                        var obj = eval('('+str+')');
                        $("[name=roleId]").each(function () {
                            if($(this).val() == obj.roleId){
                                $(this).attr("checked","checked");
                                return false;
                            }
                        })
                    }
                    if (callback){
                        callback();
                    }
                }
            }
        });
    }



</script>
</body>
</html>